<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>商品详情</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="showGoods">返回</el-button>
        </div>
        <el-table
                :data="skuList  "
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="商品名称:" class="elItem">
                            <span>{{ props.row.title }}</span>
                        </el-form-item>
                        <el-form-item label="图片:" class="elItem">
                            <img :src="props.row.images" alt="" width="200px">
                        </el-form-item>
                        <el-form-item label="创建时间:" class="elItem">
                            <span>{{ props.row.createTime }}</span>
                        </el-form-item>
                        <el-form-item label="更新时间:" class="elItem">
                            <span>{{ props.row.lastUpdateTime }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品 ID"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="特有属性"
                    prop="ownSpec">
            </el-table-column>
            <el-table-column
                    label="价格"
                    prop="price">
            </el-table-column>
            <el-table-column
                    label="库存"
                    prop="stock">
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script>
    export default {
        name: "GoodsDetail",
        props:['currentDetail'],
        data() {
            return {
                spuTitle:[],
                skuList:[],
            }
        },
        methods:{
            showGoods(){
                this.$emit("showDetail")
            },
            async getInitData(){
                const res = await this.$http.get("/item/goods/getDetailBySpuId/"+this.currentDetail)
                if (res.data.code !== "200") {
                    return this.$message.error('获取商品类目列表失败！错误码:' + res.data.code)
                }
                this.skuList = res.data.data.skuList
                for (let i = 0; i < this.skuList.length; i++) {
                    this.skuList[i].price = this.skuList[i].price/100 + "元"
                    // this.ownSpec = []
                    let obj = JSON.parse(this.skuList[i].ownSpec);
                    let values = Object.values(obj);
                    this.skuList[i].ownSpec = values.join(" , ")

                }
                this.spuTitle = res.data.data.title
            }
        },
        created() {
            this.getInitData()
            console.log(this.currentDetail)
        }
    }
</script>

<style scoped>

    /*card*/
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }


    /*表格*/
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .elItem{
        width: 100%;
        margin-left: 3%;
    }
</style>